<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap extensions 扩展 - itxst.com</title>
    <meta name="keywords" content="tiptap Extensions 扩展" />
    <meta name="description" content="Tiptap extensions 扩展为某一类功能集合，比如菜单扩展、颜色扩展，你也可以开发自己的扩展。还有一些具有更多功能的扩展，我们称它们为nodes 节点和 marks 标记，它们可以在编辑器中呈现内容。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/extensions.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap extensions 扩展</h1>
               
               <p class="p">Tiptap <b>extensions</b> 扩展为某一类功能集合，比如菜单扩展、颜色扩展，你也可以开发自己的扩展。还有一些具有更多功能的扩展，我们称它们为nodes 节点和 marks 标记，它们可以在编辑器中呈现内容。</p><h2>扩展列表</h2><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;">名称<br/></th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">StarterKit（核心）</th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">源码</th></tr><tr class="ue-table-interlace-color-double"><td>BubbleMenu</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bubble-menu/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>CharacterCount</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>Collaboration</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>CollaborationCursor</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>Color</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>Dropcursor</td><td>Included</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>FloatingMenu</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-floating-menu/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>Focus</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>FontFamily</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>Gapcursor</td><td>Included</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>History</td><td>Included</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>InvisibleCharacters</td><td>–</td><td>Requires a Tiptap Pro subscription</td></tr><tr class="ue-table-interlace-color-double"><td>Mathematics</td><td>–</td><td>Requires a Tiptap Pro subscription</td></tr><tr class="ue-table-interlace-color-single"><td>Placeholder</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>StarterKit</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/starter-kit/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>TextAlign</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/">GitHub</a></td></tr><tr class="ue-table-interlace-color-double"><td>Typography</td><td>–</td><td><a href="https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/">GitHub</a></td></tr><tr class="ue-table-interlace-color-single"><td>UniqueID</td><td>–</td><td>Requires a Tiptap Pro subscription</td></tr></tbody></table></div><h2>自定义扩展</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  // Your code here
})

const editor = new Editor({
  extensions: [
    // Register your custom extension with the editor.
    CustomExtension,
    // … and don’t forget all other extensions.
    Document,
    Paragraph,
    Text,
    // …
  ],
})</code></pre><p>请访问这里学习<a href="http://customextensions.html" target="_self">自定义扩展</a></p>
                  <h2>Color 颜色扩展</h2>
                    <p class="p">Tiptap Color 颜色扩展使能够在编辑器中设置文字的颜色，它依赖TextStyle标记，该标记呈现span 标签。然后将字体颜色应用为内联样式。 </p><a href="/tiptap/qbmjjviu.html" title="Tiptap Color 颜色扩展">点击访问>></a>
                  <h2>Bubble Menu 气泡菜单</h2>
                    <p class="p">Tiptap BubbleMenu 浮动菜单扩展，当选中对象菜单将悬浮在鼠标附近，你可以对选中的标记mark进行操作。 </p><a href="/tiptap/r673eb7v.html" title="Tiptap Bubble Menu 气泡菜单">点击访问>></a>
                  <h2>CharacterCount 文字统计</h2>
                    <p class="p">tiptap CharacterCount 扩展将允许的字符数限制为指定的长度，并能够返回字符和单词的数量，中文文字数量统计不准确，需要自己改进。 </p><a href="/tiptap/qijfbymn.html" title="Tiptap CharacterCount 文字统计">点击访问>></a>
                  <h2>Collaboration 实时协作</h2>
                    <p class="p">Tiptap Collaboration 扩展可以使一个文档同时多个进行实时协作，实时协作基于 Y.js 实现，本文演示的是webrtc实现协作，webrtc 并不会把数据发送到服务器，而是浏览器间直接进行通讯。 </p><a href="/tiptap/nafqunuy.html" title="Tiptap Collaboration 实时协作">点击访问>></a>
                  <h2>CollaborationCursor 协作光标</h2>
                    <p class="p">Tiptap CollaborationCursor 扩展在多人同时编辑一个文档时可以显示每个用户的昵称和位置，你可以在多个浏览器中打开试试看效果。 </p><a href="/tiptap/iufiarif.html" title="Tiptap CollaborationCursor 实时协作光标">点击访问>></a>
                  <h2>Dropcursor 拖动光标</h2>
                    <p class="p">Tiptap Dropcursor 扩展,当你在编辑器里面拖拽一个对象比如图片时，它显示一个光标要拖拽到的位置。 </p><a href="/tiptap/mm2qiruy.html" title="Tiptap Dropcursor 拖动光标扩展">点击访问>></a>
                  <h2>Floating Menu 浮动菜单</h2>
                    <p class="p">Tiptap Floating Menu 浮动菜单扩展，当新启一个空行时可以使用浮动菜单悬浮在这行上面，你可以在这个菜单上面放置需要的功能。 </p><a href="/tiptap/q6rz7faq.html" title="Tiptap Floating Menu 浮动菜单">点击访问>></a>
                  <h2>Focus 焦点扩展</h2>
                    <p class="p">Tiptap Focus 扩展当用户选中默个节点时，可以制定一个样式高亮显示让用户知道选中了当前节点。 </p><a href="/tiptap/nyqfr3ub.html" title="Tiptap Focus 焦点扩展">点击访问>></a>
                  <h2>FontFamily 字体</h2>
                    <p class="p">Tiptap FontFamily 字体扩展，它作用于 TextStyle 标记上，渲染成 Span 标签的内联样式。 </p><a href="/tiptap/auzfvbmz.html" title="Tiptap FontFamily 字体">点击访问>></a>
                  <h2>Gapcursor 空光标</h2>
                    <p class="p">Tiptap Gapcursor 空光标扩展，当你选择类似图片之类的节点后面又没有节点时，该插件会插入一个空光标。 </p><a href="/tiptap/7fiqvarr.html" title="Tiptap Gapcursor 空光标">点击访问>></a>
                  <h2>History 历史记录</h2>
                    <p class="p">Tiptap History 扩展提供历史记录支持,将记录文档的所有操作更改，可以撤回操作也可以重新开始。 </p><a href="/tiptap/eyar7j6j.html" title="Tiptap History 历史记录">点击访问>></a>
                  <h2>Placeholder 占位符</h2>
                    <p class="p">Tiptap Placeholder 占位符扩展，当编辑器内容为空时可以显示你需要提示的文字，也可以在每行显示占位符文字。 </p><a href="/tiptap/mqiunerv.html" title="Tiptap Placeholder 占位符">点击访问>></a>
                  <h2>StarterKit 核心扩展</h2>
                    <p class="p">Tiptap StarterKit 是最流行的Tiptap扩展的集合，你不需要去一个一个导入这些扩展。 </p><a href="/tiptap/nn6zqeub.html" title="Tiptap StarterKit 核心扩展">点击访问>></a>
                  <h2>TextAlign 对齐方式</h2>
                    <p class="p">Tiptap TextAlign 对齐方式，你可以设置 left  center  right justify等对齐方式。 </p><a href="/tiptap/22uyivmb.html" title="Tiptap TextAlign 对齐方式">点击访问>></a>
                  <h2>Typography 特殊符号</h2>
                    <p class="p">Tiptap Typography 排版你可以理解成输入某些字符后转换成特殊的字符，比如输入(c)会自动转换成&#169; </p><a href="/tiptap/fuz3imzb.html" title="Tiptap Typography 特殊符号">点击访问>></a>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2     curr-dir arrow-2" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/qbmjjviu.html" title="Tiptap Color 颜色扩展">Color 颜色扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/r673eb7v.html" title="Tiptap Bubble Menu 气泡菜单">Bubble Menu 气泡菜单</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/qijfbymn.html" title="Tiptap CharacterCount 文字统计">CharacterCount 文字统计</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/nafqunuy.html" title="Tiptap Collaboration 实时协作">Collaboration 实时协作</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/iufiarif.html" title="Tiptap CollaborationCursor 实时协作光标">CollaborationCursor 协作光标</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mm2qiruy.html" title="Tiptap Dropcursor 拖动光标扩展">Dropcursor 拖动光标</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/q6rz7faq.html" title="Tiptap Floating Menu 浮动菜单">Floating Menu 浮动菜单</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/nyqfr3ub.html" title="Tiptap Focus 焦点扩展">Focus 焦点扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/auzfvbmz.html" title="Tiptap FontFamily 字体">FontFamily 字体</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/7fiqvarr.html" title="Tiptap Gapcursor 空光标">Gapcursor 空光标</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/eyar7j6j.html" title="Tiptap History 历史记录">History 历史记录</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mqiunerv.html" title="Tiptap Placeholder 占位符">Placeholder 占位符</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/nn6zqeub.html" title="Tiptap StarterKit 核心扩展">StarterKit 核心扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/22uyivmb.html" title="Tiptap TextAlign 对齐方式">TextAlign 对齐方式</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/fuz3imzb.html" title="Tiptap Typography 特殊符号">Typography 特殊符号</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
